<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/head1.jpg" alt="">
    <span>My Space</span>
    <!-- 空白元素 实现占位 -->
    <div class="spacer"></div>
    <a href="index.html">主页</a>
    <a href="mywork.html">我的作品</a>
    <a href="#">博客</a>
        <a href="aboutme.html">生活碎片</a>
    <a href="logout">退出</a>
</div>
<!-- 这里的.container作为页面的版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="left">
        <!-- 表示整个用户的信息区域 -->
        <div class="card">
            <img src="img/head.jpg" alt="">
            <!--            用户名-->
            <h3></h3>
            <a href="https://github.com/lt152" target="_blank">github地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>4</span>
                <span>1</span>
            </div>
            <div style="margin-top: 20px">
                <p style="font-size: small">透过黑暗，看到光明。</p>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="middle">
        <!--<span >454545</span>-->
        <div>
            <p style="text-align: center;margin-top: 20px;">加载中，请稍候————</p>
        </div>

    </div>
    <div class="right">
        <div class="timezone">
            <h2 class="h2">时间如流水</h2>

            <div class="align">
                <div class="clock">
                    <span id="h">99</span>
                    <span>:</span>
                    <span id="m">99</span>
                    <span>:</span>
                    <span id="ss">99</span>
                    <!--                    &nbsp;&nbsp;&nbsp;-->
                    <span id="i1">早晨</span>
                </div>
                <h3>
                    <p id="i2">一日之计在于晨。</p>
                </h3>
                <div class="calendar">
                    <span id="year">99</span>
                    <span>年</span>
                    <span id="month">99</span>
                    <span>月</span>
                    <span id="date">99</span>
                    <span>日</span>
                    <!--                    &nbsp;&nbsp;&nbsp;--><br>
                    <span id="week">周</span>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="jquery.js"></script>
<script>
    // 在页面加载的时候, 通过 ajax 给服务器发送数据, 获取到博客列表信息, 并且显示在界面上.
    function getBlogList() {
        $.ajax({
            type: 'get',
            url: 'blog',
            success: function (body) {
                // 获取到的 body 就是一个 js 对象数组, 每个元素就是一个 js 对象, 根据这个对象构造 div
                //1.先把 .right里原因的内容清空
                let rightDiv = $(".middle").get(0);
                rightDiv.innerHTML = '<div style="height: 40px">\n' +
                    '            <a class="write" style="float: right;" href="blog_edit.html">写博客</a>\n' +
                    '        </div>';
                //2.遍历body，构造出一个个的blogDiv
                for (let blog of body) {
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';
                    //构造标题
                    let titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = blog.title;
                    blogDiv.appendChild(titleDiv);
                    //构造发布时间
                    let dateDiv = document.createElement('div');
                    dateDiv.className = 'date';
                    dateDiv.innerHTML = blog.postTime;
                    blogDiv.appendChild(dateDiv);
                    //构造博客的摘要
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.content;
                    blogDiv.appendChild(descDiv);
                    //构造查看全文
                    let a = document.createElement('a');
                    a.innerHTML = '查看全文&gt&gt';
                    // 此处希望点击之后能够跳转到 博客详情页 !!
                    // 这个跳转过程需要告知服务器要访问的是哪个博客的详情页.
                    a.href = 'blog_detail.html?blogId=' + blog.blogId;
                    blogDiv.appendChild(a);

                    //把blogDiv挂到dom树上
                    rightDiv.appendChild(blogDiv);
                }
            },
            error: function () {
                alert('获取博客列表失败！');
            }
        });
    }

    getBlogList();


</script>

<script>
    //通过 get /login 这个接口来获取当前的登录状态
    function getUserInfo() {
        $.ajax({
            type: 'get',
            url: 'login',
            success: function (body) {
                //判定此处的body是不是一个有效的user对象（userId是否非0）
                if (body.userId && body.userId > 0) {
                    //登录成功，不做处理
                    console.log("当前用户登录成功，用户名：" + body.username);
                    changeUserName(body.username);
                } else {
                    //登录失败，让前端页面跳转到login.html
                    alert("当前您尚未登录！请登录后再访问！");
                    location.assign('login.html');
                }
            },
            error: function () {
                alert('当前您尚未登录！请登录后再访问此页面！');
                location.assign('login.html');
            }
        });
    }


    function changeUserName(username) {
        let h3 = document.querySelector('.card>h3');
        h3.innerHTML = username;
    }

    getUserInfo();
</script>
</body>
</html>
<style>
    .middle .write {
        display: block;
        width: 140px;
        height: 40px;
        margin: 10px;
        color: black;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
        transition: all 0.5s;
        border: 2px black solid;
    }

    .middle .write:hover {
        background: rgb(97, 84, 84);
        color: #fff;
    }
</style>
<script type="text/javascript" src="js/jsTime.js"></script>
